<template>
  <!-- 收货地址 -->
  <van-contact-card
    type="edit"
    :name="`${address.consignee} ${address.region_text}`"
    :tel="address.mobile"
    @click="AddressShow = true"
  />

  <!-- 物流详情 -->
  <van-cell-group>
    <van-cell title="物流公司" :value="express.name" />
    <van-cell title="物流单号" :value="order.expresscode" />
    <van-cell title="状态" value="派送中" />
  </van-cell-group>

  <!-- 物流步骤条 -->
  <van-steps direction="vertical" :active="0">
    <van-step>
      <h3>【佛山】派送中</h3>
      <p>2025-03-12 12:40</p>
    </van-step>
    <van-step>
      <h3>【广州】中转</h3>
      <p>2025-03-11 10:00</p>
    </van-step>
    <van-step>
      <h3>快件已发货</h3>
      <p>2025-03-10 09:30</p>
    </van-step>
  </van-steps>

  <!-- 收货地址弹出层 -->
  <van-popup
    v-model:show="AddressShow"
    position="bottom"
    round
    style="padding-top: 4px"
  >
    <van-form>
      <van-field v-model="address.consignee" label="收件人" readonly />
      <van-field v-model="address.mobile" label="手机号码" readonly />
      <van-field v-model="address.region_text" label="所在地区" readonly />
      <van-field v-model="address.address" label="详细地址" readonly />
      <van-field v-model="address.status_text" label="是否默认地址" readonly />
      <div style="width: 80%; margin: 1em auto">
        <van-button round block type="primary" @click="AddressShow = false"
          >关闭</van-button
        >
      </div>
    </van-form>
  </van-popup>
</template>

<script setup>
// this
const { proxy } = getCurrentInstance();
// 接收地址栏参数 订单id
const orderid = ref(proxy.$route.query.orderid ?? 0);
// 登录信息
const business = proxy.$business;
// 收货地址数据
const address = ref({});
// 收货地址弹出层
const AddressShow = ref(false);
// 订单数据
const order = ref({});
// 物流公司数据
const express = ref({});

// 挂载前钩子
onBeforeMount(() => {
  GetExpressData();
});

// 获取物流数据
const GetExpressData = async () => {
  // 组装参数
  const params = {
    orderid: orderid.value,
    busid: business.value.id,
  };
  // 发起请求;
  const result = await proxy.$http.post({
    url: "/order/express",
    params,
  });
  // 处理请求结果;
  if (result.code === 1) {
    order.value = result.data.order;
    address.value = result.data.address;
    express.value = result.data.express;
  } else {
    proxy.$fail({
      message: result.msg,
      onClose: () => {
        proxy.$router.back();
      },
    });
  }
};
</script>
